import * as echarts from "echarts";
const colors = ["#5470C6", "#EE6666"];
let charts = echarts.init(document.querySelector(".left"));
let option = {
  title: {
    text: "2020-2021年疫情感染情况",
    top: 10,
  },
  color: colors,
  tooltip: {
    trigger: "none",
    axisPointer: {
      type: "cross",
    },
  },
  legend: {
    top: 10,
    right: 20,
  },
  grid: {
    top: 70,
    bottom: 50,
  },
  xAxis: [
    {
      type: "category",
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1],
        },
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              "Precipitation  " +
              params.value +
              (params.seriesData.length
                ? "：" + params.seriesData[0].data
                : "")
            );
          },
        },
      },
      // prettier-ignore
      data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12'],
    },
    {
      type: "category",
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0],
        },
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              "Precipitation  " +
              params.value +
              (params.seriesData.length
                ? "：" + params.seriesData[0].data
                : "")
            );
          },
        },
      },
      // prettier-ignore
      data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10', '2020-11', '2020-12'],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "2020年1-12月疫情情况(2020)",
      type: "line",
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: "series",
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
        2.3,
      ],
    },
    {
      name: "2020年1-12月疫情情况(2021)",
      type: "line",
      smooth: true,
      emphasis: {
        focus: "series",
      },
      data: [
        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
        0.7,
      ],
    },
  ],
};
charts.setOption(option);